<template>
  <div class="personal layout-pd">
    <el-row>
      <el-col v-if="state.order_info.status==-1" :span="24" style="margin-bottom: 20px">
        <el-card shadow="hover">
          <div style="text-align: center">
            <div >
              <svg style="font-size: 90px;color:#f9a314"  viewBox="0 0 20 20" width="1em" height="1em"   >
                <path fill="currentColor"  d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8s-8-3.58-8-8s3.58-8 8-8m1.13 9.38l.35-6.46H8.52l.35 6.46zm-.09 3.36c.24-.23.37-.55.37-.96c0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35s-.82.12-1.07.35s-.37.55-.37.97c0 .41.13.73.38.96c.26.23.61.34 1.06.34s.8-.11 1.05-.34"/>
              </svg>
            </div>
            <div style="font-size: 20px;font-weight: 600;opacity: 0.5">已取消</div>
            <div style="opacity: 0.5">订单由于超时已自动取消</div>
          </div>
        </el-card>
      </el-col>
      <!-- 商品信息 -->
      <el-col :span="state.num24" >
        <el-card shadow="hover" header="商品信息">
          <div class="personal-user">
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">产品名称：</div>
                      <div class="personal-item-value">
                        <el-text>{{ state.goods_snap.title }}</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">类型/周期：</div>
                      <div class="personal-item-value">
                        <el-text>{{ state.goods_snap.cycle }}</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">价格：</div>
                      <div class="personal-item-value">
                        <el-text>￥{{ state.order_info.price_total }}</el-text>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 总额汇总-->
      <el-col v-if="state.order_info.status!=-1" :xs="24" :sm="8" class="pl15 personal-info">
        <el-card shadow="hover">
          <div class="order-total-detail">
            <div>
              <el-text>订单总额</el-text>
            </div>
            <div style="display: flex;margin-top: 20px">
              <div style="flex: 1">{{ state.goods_snap.title }}</div>
              <div style="font-weight: 600">￥{{ state.order_info.price_total }}</div>
            </div>
            <el-divider/>
            <div v-if="state.rate>0">
              <div style="display: flex;margin-top: 20px">
                <div style="flex: 1">支付手续费</div>
                <div style="font-weight: 600">￥{{ state.rate_price }}</div>
              </div>
              <el-divider/>
            </div>

            <div>
              <el-text>总计</el-text>
            </div>
            <div style="display:flex;margin-top: 20px">
              <div v-if="state.order_info.user_coupon_id>0" style="flex: 1;text-decoration: line-through">
                <el-text size="large" tag="b">￥400.00</el-text>
              </div>
              <div style="width: 100%;text-align: right;font-size: 30px;font-weight: 600">
                ￥{{ state.total_price }}
              </div>

            </div>
            <el-button @click="jumpPay" style="width: 100%;margin-top: 20px" color="#409eff">
              <SvgIcon name="ele-CircleCheck"/>
              去支付
            </el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 订单信息 -->
      <el-col :span="state.num24" :style="{marginTop:state.topHeight+'px'}">
        <el-card shadow="hover" class="mt15">
          <template #header>
            <div class="card-header" style="display: flex">
              <div style="flex:1">订单信息</div>
              <div v-if="state.order_info.status!=-1">
                <el-button size="small" type="danger" @click="onCancel">关闭订单</el-button>
              </div>
            </div>
          </template>
          <div class="personal-user">
            <div class="personal-user-right">
              <el-row>
                <el-col :span="24">
                  <el-row>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">订单号：</div>
                      <div class="personal-item-value">
                        <el-text>{{ state.order_info.order_sn }}</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">金额：</div>
                      <div class="personal-item-value">
                        <el-text>￥{{ state.order_info.price_total }}</el-text>
                      </div>
                    </el-col>
                    <el-col :xs="24" class="personal-item mb12">
                      <div class="personal-item-label">创建时间：</div>
                      <div class="personal-item-value">
                        <el-text>{{ state.order_info.created_at }}</el-text>
                      </div>
                    </el-col>

                  </el-row>
                </el-col>

              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 支付方式-->
      <el-col v-if="state.order_info.status!=-1" :xs="24" :sm="16">
        <el-card shadow="hover" class="mt15" header="支付方式">

          <el-row :gutter="15" class="personal-recommend-row">
            <el-col :sm="32" v-for="(v, k) in state.pay_method_list" :key="k" @click="clickPay(k)"
                    class="personal-recommend-col">
              <div class="personal-recommend" :style="{'border':v.border }">
                <img class="pay-logo" :src="v.icon">
                <div class="personal-recommend-auto">
                  <div>{{ v.name }}</div>
                  <div class="personal-recommend-msg" v-if="v.rate>0">({{ (`手续费率` + v.rate + '%') }})</div>
                  <div class="personal-recommend-msg" v-else>{{ v.desc }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts" name="orderDetail">
import {reactive, ref} from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus';
import {useRouter, useRoute} from 'vue-router';

const route = useRoute();
import {orderApi} from "/@/api/order";
import {platformApi} from "/@/api/platform";

const router = useRouter(); // 获取路由实例

const state = reactive({
  pay_method_list: [],
  pay_method_select: 0,
  order_info: {},
  goods_snap: {},
  rate: 0,
  rate_price: 0,
  topHeight: 0,
  downRequest: false,
  requestLimit: 0,
  total_price: '0.00',
  num24:16,
})

const getMethodList = async () => {
  const res = await platformApi().payMethodList();
  if (res.code != 0) {
    return;
  }
  state.rate = res.data[0].rate;
  if (state.order_info.status != -1) {
    if (state.rate > 0) {
      state.topHeight = -170;
    } else {
      state.topHeight = -100;
    }
  }
  res.data.map((item, index) => {
    item.border = index == 0 ? '2px solid #686565' : '';
    state.pay_method_list.push(item);
  })
}

const getOrderInfo = async () => {
  const res = await orderApi().detail({order_sn: route.query.sn});
  if (res.code != 0) {
    return;
  }
  state.order_info = res.data;
  state.goods_snap = res.data.goods_snap;
  state.rate_price = calculationRate(res.data.price_real)
  state.total_price = calculationTotal(res.data.price_real, state.rate_price);
  if(state.order_info.status!=-1){
    await getMethodList();
    setInterval(() => {
      if (!state.downRequest) {
        checkOrder();
      }
    }, 1000)
  }else {
    state.num24=24
  }

}
getOrderInfo();
const clickPay = (index) => {
  state.pay_method_list.map((item, _index) => {
    item.border = '';
    if (_index == index) {
      item.border = '2px solid #686565';
      state.pay_method_select = index;
      state.rate = item.rate;
      state.rate_price = calculationRate(state.order_info.price_real)
      state.total_price = calculationTotal(state.order_info.price_real, state.rate_price);
      if (state.rate > 0) {
        state.topHeight = -170;
      } else {
        state.topHeight = -100;
      }
    }
  });

}
const jumpPay = async () => {
  ElMessage.success('跳转支付中...')
  setTimeout(() => {
    router.push({
      path: '/pay',
      query: {sn: route.query.sn}
    });
  }, 1500)
}
const calculationRate = (price) => {
  return ((price * state.rate) / 100).toFixed(2);
}
const calculationTotal = (price1, price2) => {
  return ((price1 * 100 + price2 * 100) / 100).toFixed(2);
}
const checkOrder = async () => {
  state.requestLimit++;
  if (state.requestLimit >= 100) {
    state.downRequest = true;
  }
  const t = Date.now();
  const res = await orderApi().check({sn: route.query.sn, t: t});
  if (res.code != 0 || res.data.status == -1) {
    state.downRequest = true;
    console.log('stop');
    state.order_info = res.data;
    state.topHeight=0;
    state.num24=24
  }
}
// 取消订单
const onCancel = () => {
  ElMessageBox.confirm(`如果您已经付款，取消订单可能会导致支付失败，确定要取消订单吗？`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await orderApi().cancel({order_sn: route.query.sn})
    if (res.code != 0) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success('取消成功');
    state.order_info.status=-1;
  }).catch(() => {
  });
};

</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 130px;
    display: flex;
    align-items: center;

    .personal-user-left {
      width: 100px;
      height: 130px;
      border-radius: 3px;

      :deep(.el-upload) {
        height: 100%;
      }

      .personal-user-left-upload {
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }

        &:hover {
          img {
            animation: logoAnimation 0.3s ease-in-out;
          }
        }
      }
    }

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          font-size: 14px;
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-info {
    .personal-info-more {
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px;

      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    margin-top: 20px;

    .pay-logo {
      position: absolute;
      right: 70px;
      top: 20px;
    }

    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        margin-top: 10px;
        background: rgba(64, 158, 2550, 0.4);

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

}

.order-total {
  height: 80px;
  background-color: #64d89d;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 6px;

  :deep(.el-input__wrapper) {
    padding: 0px !important;
  }

  :deep(.el-input__inner) {
    background-color: #64d89d;
  }
}

.order-total-detail {
  background-color: #64d89d;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  display: block;
}

.el-text {
  font-size: 14px;
}
</style>
